<style>
     #box1{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        font-size: 100px;
     }
     #but1{
        color: red;
     }
     #but2{
        color: rgba(171, 76, 76, 0.2);
        background-color: rgba(81, 29, 29, 0);
     }
     #but3{
        color: rgba(171, 76, 76, 0.2);
        background-color: rgba(81, 29, 29, 0);
        
     }

</style>
<body>
    <div id="box1">10</div>
    <input type="button"id='but1' value="开始">
    <input type="button"id='but2'value="暂停">
    <input type="button"id='but3'value="重置">
    <script>
        var box1 = document.getElementById('box1')
        var but1 = document.getElementById('but1')
        var but2 = document.getElementById('but2')
        var but3 = document.getElementById('but3')

        // but2.style.backgroundColor =rgba(111,222,333,0.2)
        var t;
        var r = 10;
    but1.onclick = function(){
         but1.style.backgroundColor = 'rgba(81, 29, 29, 0)'
         but1.style.color ='#ccc'
         but2.style.color ='red'
         but2.style.backgroundColor = 'rgba(100, 100, 100, 0.7)'

        
        
        
        
        clearInterval(t)
        // clearInterval(t)

        t = setInterval(function(){

        box1.innerHTML=r;
        r--;
        if(r<0){
            clearInterval(t);
            r=10
        }
        //  console.log(1)
        },500)
    }
        but2.onclick= function(){
            but2.style.color =''
            but3.style.color ='red'
            but2.style.backgroundColor = 'rgba(81, 29, 29, 0)'
            but3.style.backgroundColor = 'rgba(100, 100, 100, 0.7)'

            clearInterval(t)

        }
        but3.onclick =function(){
            but2.style.backgroundColor = 'rgba(81, 29, 29, 0)'
            but3.style.backgroundColor = 'rgba(81, 29, 29, 0)'
            but2.style.color =''
            but1.style.backgroundColor = 'rgba(100, 100, 100, 0.7)'
            but1.style.color='red'
            but3.style.color=''
            // var r= 10
            
            box1.innerHTML=r
            
        }  
        //         # 作业
        // 1. 完善个人工具库，持续离开这个行业
        //     - 在千锋学习二阶段期间不要使用
        //     - 善于发现功能
        //     - 只要有可能被复用的功能，都可以封装
        //     - 加上注释
        // 2. 倒计时
        //     - 三个按钮，先实现基本功能，不用控制按钮的禁用
              
        // 3. 回到顶部


        
        // 4. 本周知识点回顾
        // 5. 尤其是代码
        // 6. 第一周考试练习题
    </script>
</body>